<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header" style="justify-content: normal">
            <span>检查项目:</span>
            <div>
              <el-checkbox-group v-model="checkboxGroup1" size="large">
                <el-checkbox-button
                  v-for="city in cities"
                  :key="city"
                  :label="city"
                >
                  {{ city }}
                </el-checkbox-button>
              </el-checkbox-group>
            </div>
          </div>
          <br />
          <!-- <span>挂号单号:</span> -->
          <el-form>
            <el-form-item
              label="挂号单号"
              prop="挂号单号"
              :rules="[
                { required: false, message: 'age is required' },
                { type: 'number', message: 'age must be a number' },
              ]"
            >
              <el-input
                v-model.number="numberValidateForm.age"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-form>

          <el-form>
            <el-form-item
              label="挂号单号"
              prop="挂号单号"
              :rules="[
                { required: false, message: 'age is required' },
                { type: 'number', message: 'age must be a number' },
              ]"
            >
              <el-input
                v-model.number="numberValidateForm.age"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(formRef)">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
              <el-button @click="resetForm(formRef)">
                <el-icon><RefreshRight /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <div class="text item">
          <el-table :data="tableData" border show-summary style="width: 100%">
            <el-table-column prop="id" label="监测单号" width="180" />
            <el-table-column prop="entryName" label="项目名称" />
            <el-table-column prop="name" sortable label="患者姓名" />
            <el-table-column prop="checkTheStatus" sortable label="检查状态" />
            <el-table-column
              prop="inspectionResults"
              sortable
              label="检查结果"
            />
            <el-table-column prop="checkTime" sortable label="检查时间" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" size="small" @click="drawer = true">
                  提交结果
                </el-button>
                <!-- 查看抽屉 -->
                <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
                  <div>
                    <!-- <el-button @click="innerDrawer = true">Click me!</el-button> -->
                    <!-- 抽屉内容 -->
                    <el-form-item label="检查结果">
                      <el-input v-model="form.desc" type="textarea" />
                    </el-form-item>
                    <el-upload
                      v-model:file-list="fileList"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    <div>
                      <h1></h1>
                    </div>
                    <el-drawer
                      v-model="innerDrawer"
                      title="I'm inner Drawer"
                      :append-to-body="true"
                      :before-close="handleClose"
                    >
                      <p>_(:зゝ∠)_</p>
                    </el-drawer>
                  </div>
                </el-drawer>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";

import type { UploadFile } from "element-plus";
const checkboxGroup1 = ref(["乙肝五项"]);
const checkboxGroup2 = ref(["血常规"]);
const checkboxGroup3 = ref(["CT"]);
const checkboxGroup4 = ref(["X光"]);
const checkboxGroup5 = ref(["尿常规"]);
const checkboxGroup6 = ref(["便常规"]);
const cities = ["乙肝五项", "血常规", "CT", "X光", "尿常规", "便常规"];

import type { FormInstance } from "element-plus";

const formRef = ref<FormInstance>();

const numberValidateForm = reactive({
  age: "",
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

interface Product {
  id: string;
  name: string;
  amount1: string;
  amount2: string;
  amount3: number;
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "Total Cost";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "N/A";
    }
  });

  return sums;
};

const tableData: Product[] = [
  {
    id: "12987122",
    name: "Tom",
    amount1: "234",
    amount2: "3.2",
    amount3: 10,
  },
  {
    id: "12987123",
    name: "Tom",
    amount1: "165",
    amount2: "4.43",
    amount3: 12,
  },
  {
    id: "12987124",
    name: "Tom",
    amount1: "324",
    amount2: "1.9",
    amount3: 9,
  },
  {
    id: "12987125",
    name: "Tom",
    amount1: "621",
    amount2: "2.2",
    amount3: 17,
  },
  {
    id: "12987126",
    name: "Tom",
    amount1: "539",
    amount2: "4.1",
    amount3: 15,
  },
];

//查看抽屉
const drawer = ref(false);
const innerDrawer = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("You still have unsaved data, proceed?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const form = reactive({
  desc: "",
});

//图片上传
const fileList = ref<UploadUserFile[]>([]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<style>
.左浮动 {
  float: left;
  margin-right: 10px;
}

.demo-button-style {
  margin-top: 24px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
